<template>
  <div class="change-status-wrap">
    <div class="mask" @click="maskClick"></div>
    <el-dialog title="单价调整" center :visible="true" width="400px" @close="close">
        <el-input size="small" class="search" clearable v-model="price" placeholder="请输入单价"></el-input>
        <span slot="footer" class="dialog-footer">
        <el-button @click="statusClose">取 消</el-button>
        <el-button type="primary" @click="priceConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Emit, Prop } from 'vue-property-decorator';
import ajaxResquest from '@/api/apiRequest';

@Component({})
export default class ChangeStatus extends Vue {
  @Prop() data!: any;
  priceRes: any = ajaxResquest;
  price: string = '';
  mounted() {
    this.priceRes = new ajaxResquest('/goods/updateGoodsPrice');
    this.price=this.data.price
    console.log(this.data);
  }

  @Emit('closeChange')
  maskClick() {}

  @Emit('closeChange')
  statusClose() {}

  @Emit('closeChange')
  close() {}

  priceConfirm() {
    this.priceRes
      .getFunction({ price: this.price, goodsId: this.data.id })
      .then((res: any) => {
        if (res.data.code === 1) {
          this.resOk();
        }
      });
  }
  @Emit('priceConfirm')
  resOk() {}
}
</script>
<style lang="less">
.delete-confirm-wrap {
  z-index: 2000;
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background-color: rgba(0, 0, 0, 0.3);
  }
  .img-card {
    // position: fixed;
    width: 500px;
    height: 500px;
    // left: 50%;
    // top: 50%;
    // transform: translate(-150px, -210px);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 104;
    background-color: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    .pop-pic {
      z-index: 104;
      height: 100%;
      width: 100%;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .el-icon-close {
      font-size: 24px;
      padding: 3px;
      color: #000;
    }
    .icon-wrap {
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }
}
</style>
